<template>
  <a-card title="全局数据搜索" class="card">
    <div class="header">
      <a-select
        v-model:modelValue="formData.cate"
        placeholder="主数据类型"
        :bordered="false"
        :style="{
          width: '140px',
        }"
        :options="globalDataOpt"
      />
      <div
        class="advanced-search"
        @click="
          listVisible = false;
          modalVisible = true;
        "
      >
        高级搜索
      </div>
    </div>
    <div class="bottom">
      <a-input-search
        v-model="formData.keyword"
        :style="{ width: '100%' }"
        placeholder="支持多值搜索，关键词之间以“，”或空格间隔"
        button-text="搜索"
        search-button
        @search="debounceSearch"
        @input="debounceFn"
        @focus="debounceFn"
      />
      <div v-if="modalVisible || listVisible" class="modal">
        <div v-if="listVisible && listData" class="search-list">
          <div v-for="item in listData" :key="item.id" class="list-item">{{
            item.name
          }}</div>
        </div>
        <div
          v-if="listVisible && (!listData || listData.length === 0)"
          class="no-data"
          ><NoData></NoData
        ></div>
        <div v-if="modalVisible" class="advanced-search-list"> 高级搜索 </div>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useDebounceFn } from '@vueuse/core';

  const globalDataOpt = ref([
    {
      label: '物料主数据',
      value: 'all',
    },
    {
      label: '会计科目主数据',
      value: 'keyword',
    },
  ]);
  const initForm = () => {
    return {
      cate: '',
      keyword: '',
    };
  };
  const modalVisible = ref(false);
  const listVisible = ref(false);
  const formData = ref(initForm());
  const listData = ref();
  const fetchSearchList = async () => {
    // 模拟搜索数据
    listVisible.value = true;
    modalVisible.value = false;
    listData.value = [
      { id: 1, name: '物料1121212' },
      { id: 2, name: '物料21212' },
      { id: 3, name: '物料3121' },
    ];
  };
  const fetchData = async () => {
    // 模拟搜索数据
    listData.value = [
      { id: 1, name: '物料1121212' },
      { id: 2, name: '物料21212' },
      { id: 3, name: '物料3121' },
    ];
  };
  const debounceFn = useDebounceFn(fetchSearchList, 100);
  const debounceSearch = useDebounceFn(fetchData, 100);
  const handleMockClose = (e: any) => {
    if (!e.target.closest('.modal') && !e.target.closest('.advanced-search')) {
      modalVisible.value = false;
      listVisible.value = false;
    }
  };
  onMounted(() => {
    document.addEventListener('click', handleMockClose);
  });
</script>

<style lang="less" scoped>
  :deep(.arco-card-header) {
    background-color: #f2f3f5;
    border: 1px solid #f2f3f5;
  }
  :deep(.arco-card-header-title) {
    font-size: 14px;
    font-weight: bold;
  }
  :deep(.arco-input-wrapper) {
    padding: 4px 10px;
    border: 1px solid #eee;
    background-color: #fff;
    .arco-input::placeholder {
      background-color: #fff;
    }
  }
  :deep(.arco-btn-size-medium) {
    height: 100%;
    padding: 0 30px;
    font-size: 12px;
  }
  :deep(.arco-select-view-suffix) {
    color: #165dff;
  }
  :deep(.arco-select-view-input::placeholder) {
    color: #000;
    font-size: 14px;
  }
  .card {
    border: 1px solid #f2f3f5;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    padding-bottom: 5px;
    .advanced-search {
      font-family: Inter, Inter;
      font-weight: 400;
      font-size: 12px;
      color: #165dff;
      line-height: 14px;
      text-align: left;
      font-style: normal;
      text-decoration-line: underline;
      text-transform: none;
      cursor: pointer;
    }
  }
  .bottom {
    padding: 16px;
    padding-bottom: 5px;
    position: relative;
  }
  .modal {
    position: absolute;
    z-index: 999;
    top: 60px;
    left: 0;
    padding: 5px;
    min-height: 100px;
    width: calc(100% - 32px);
    background-color: #fff;
    margin-left: 16px;
    border: 1px solid var(--color-neutral-3);
    .search-list {
      .list-item {
        cursor: pointer;
        height: 30px;
        padding-left: 10px;
        line-height: 30px;
        &:hover {
          background-color: var(--color-neutral-3);
        }
      }
    }
  }
</style>
